<template>
  <div id="page-article">
    <section class="page-header">
      <section class="text-container">
        <h1 class="title">专业会计服务机构</h1>
        <p class="desc">Professional Accounting Service</p>
      </section>
    </section>
    <div class="detail-main">
      <section
        v-loading="loading"
        element-loading-text="加载资讯详情中..."
        class="article-container">
        <header class="detail-header">
          <h2 class="title">{{current_article && current_article.title}}</h2>
          <p class="date">{{current_article && current_article.create_time}}</p>
        </header>
        <div
          v-html="current_article && current_article.content"
          class="detail-content"></div>
      </section>
    </div>
    <contract-us></contract-us>
  </div>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-05-13
   * @Project: eabax
   */
  import contractUs from '../../components/contract-us'
  import '../../assets/less/article.less'

  async function getArticle() {
    let { $axios, $route, $router, redirect } = this,
      query = $route.query
    if (!query.id) {
      let path = '/article/list'
      if (redirect) {
        redirect(path)
      } else {
        $router.push({
          path: path
        })
      }
      return
    }
    let id = '' + query.id
    let current_article = await $axios
      .$get('/api/v1/information', {
        params: {
          id: id
        }
      })
      .then(res => {
        res.content = JSON.parse(res.content)
        return res
      })
    return { current_article, prev_article:{}, next_article:{} }
  }

  export default {
    name: 'detail',
    // Todo
    // async asyncData({ route, $axios, redirect }) {
    //   let data = {
    //     loading: false
    //   }
    //   let self = {
    //     $route: route,
    //     $axios,
    //     redirect
    //   }
    //   let { current_article, prev_article, next_article } = await getArticle.call(self)
    //   return Object.assign(data, { current_article, prev_article, next_article })
    // },
    data(){
      return {
        loading: false,
        current_article: {},
        prev_article: {},
        next_article: {}
      }
    },
    watch: {
      $route: {
        deep: true,
        handler() {
          this.getArticle()
        }
      }
    },
    mounted(){
      this.getArticle()
    },
    methods: {
      async getArticle() {
        this.loading = true
        let { current_article, prev_article, next_article } = await getArticle.call(this)
        this.loading = false
        this.current_article = current_article
        this.prev_article = prev_article
        this.next_article = next_article
      }
    },
    layout: 'common',
    components: {
      contractUs
    }
  }
</script>

